<template>
  <div :class="styles['student-dashboard']">
    <!-- 顶部导航栏 -->
    <header :class="styles['header']">
      <div :class="styles['header-left']">
        <div :class="styles['logo']">
          <img src="/exam-ai-logo.svg" alt="Exam AI" :class="styles['logo-img']">
          <span :class="styles['logo-text']">Exam AI</span>
        </div>
      </div>

      <div :class="styles['header-right']">
        <div :class="styles['user-info']">
          <span :class="styles['user-name']">{{ user?.name || user?.username }}</span>
          <span :class="[styles['user-role'], styles['student-badge']]">学生</span>
        </div>
        <button @click="handleLogout" :class="styles['logout-btn']">
          <span :class="styles['logout-icon']">🚪</span>
          退出
        </button>
      </div>
    </header>

    <div :class="styles['main-content']">
      <!-- 侧边栏 -->
      <aside :class="styles['sidebar']">
        <nav :class="styles['nav-menu']">
          <router-link to="/student" :class="styles['nav-item']">
            <span :class="styles['nav-icon']">📊</span>
            <span :class="styles['nav-text']">仪表板</span>
          </router-link>
          <router-link to="/student/exam-list" :class="styles['nav-item']">
            <span :class="styles['nav-icon']">📝</span>
            <span :class="styles['nav-text']">我的考试</span>
          </router-link>
          <router-link to="/student/history" :class="styles['nav-item']">
            <span :class="styles['nav-icon']">📚</span>
            <span :class="styles['nav-text']">考试历史</span>
          </router-link>
          <router-link to="/student/profile" :class="styles['nav-item']">
            <span :class="styles['nav-icon']">👤</span>
            <span :class="styles['nav-text']">个人资料</span>
          </router-link>
        </nav>
      </aside>

      <!-- 主要内容区域 -->
      <main :class="styles['content']">
        <div :class="styles['exam-result']">
          <div class="page-header">
            <h1 class="page-title">考试结果</h1>
            <p class="page-subtitle">{{ examTitle }}</p>
          </div>

          <!-- 成绩概览 -->
          <div class="result-overview">
            <div class="score-card">
              <div class="score-circle">
                <div class="score-number">{{ examResult.score }}</div>
                <div class="score-total">/ {{ examResult.totalScore }}</div>
              </div>
              <div class="score-percentage">{{ examResult.percentage }}%</div>
              <div class="score-grade">{{ examResult.grade }}</div>
            </div>

            <div class="result-stats">
              <div class="stat-item">
                <div class="stat-label">正确题数</div>
                <div class="stat-value correct">{{ examResult.correctCount }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">错误题数</div>
                <div class="stat-value incorrect">{{ examResult.incorrectCount }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">用时</div>
                <div class="stat-value">{{ examResult.usedTime }}分钟</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">提交时间</div>
                <div class="stat-value">{{ formatDateTime(examResult.submitTime) }}</div>
              </div>
            </div>
          </div>

          <!-- 题目回顾 -->
          <div class="question-review">
            <h2 class="section-title">题目回顾</h2>
            <div class="question-list">
              <div v-for="(question, index) in examResult.questions" :key="question.id" class="question-item"
                :class="question.isCorrect ? 'correct' : 'incorrect'">
                <div class="question-header">
                  <span class="question-index">{{ index + 1 }}.</span>
                  <span class="question-title">{{ question.title }}</span>
                  <span class="question-score">{{ question.score }}分</span>
                </div>

                <div class="question-content">
                  <div class="your-answer">
                    <strong>您的答案：</strong>
                    <span :class="question.isCorrect ? 'correct-answer' : 'incorrect-answer'">
                      {{ question.yourAnswer || '未作答' }}
                    </span>
                  </div>

                  <div v-if="!question.isCorrect" class="correct-answer-section">
                    <strong>正确答案：</strong>
                    <span class="correct-answer">{{ question.correctAnswer }}</span>
                  </div>

                  <div v-if="question.explanation" class="explanation">
                    <strong>解析：</strong>
                    <p>{{ question.explanation }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="result-actions">
            <router-link to="/student/exam-list" class="action-btn back">
              📋 返回考试列表
            </router-link>
            <router-link to="/student/history" class="action-btn history">
              📚 查看历史记录
            </router-link>
            <button @click="downloadResult" class="action-btn download">
              📥 下载成绩单
            </button>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import styles from '@/styles/student/dashboard.module.css'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const user = computed(() => authStore.user)

const handleLogout = async () => {
  await authStore.logout()
  router.push('/login')
}

const route = useRoute()

const examTitle = ref('')
const examResult = ref({
  score: 0,
  totalScore: 100,
  percentage: 0,
  grade: '',
  correctCount: 0,
  incorrectCount: 0,
  usedTime: 0,
  submitTime: '',
  questions: []
})

const formatDateTime = (dateTime) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

const downloadResult = () => {
  // 这里可以实现下载成绩单的功能
  alert('下载功能开发中...')
}

onMounted(async () => {
  const examId = route.params.id

  // 模拟数据
  examTitle.value = 'Java基础期末考试'
  examResult.value = {
    score: 85,
    totalScore: 100,
    percentage: 85,
    grade: '优秀',
    correctCount: 17,
    incorrectCount: 3,
    usedTime: 95,
    submitTime: '2024-01-15 10:30:00',
    questions: [
      {
        id: 1,
        title: '以下哪个不是Java的数据类型?',
        score: 10,
        yourAnswer: 'D',
        correctAnswer: 'D',
        isCorrect: true,
        explanation: 'Java的基本数据类型包括：byte、short、int、long、float、double、char、boolean。Function不是基本数据类型。'
      },
      {
        id: 2,
        title: 'Java中哪个关键字用于继承?',
        score: 10,
        yourAnswer: 'extends',
        correctAnswer: 'extends',
        isCorrect: true,
        explanation: 'Java使用extends关键字实现类的继承。'
      },
      {
        id: 3,
        title: '以下哪个集合是线程安全的?',
        score: 10,
        yourAnswer: 'ArrayList',
        correctAnswer: 'Vector',
        isCorrect: false,
        explanation: 'Vector是线程安全的，而ArrayList不是。如果需要线程安全的List，可以使用Collections.synchronizedList()或CopyOnWriteArrayList。'
      }
    ]
  }
})
</script>